@charset "UTF-8";
/** .slider {
	float: left;
	width: 300px;
	height: 100vh;
	border-right: 1px solid #ccc;
	text-align: center;
	padding-top: 50px;
} */
.align {
  position: absolute;
  left: 0;
  top: 150px;
  z-index: 99;
  width: 100%;
  height: 100%;
  text-align: center;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 0.5s all ease-in-out;
  -webkit-transition: 0.5s all ease-in-out;
}
.left-enter {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
.left-enter-to {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.left-enter-active,
.left-leave-active {
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}
.left-leave {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.left-leave-to {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
.right-enter {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
.right-enter-to {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.right-enter-active,
.right-leave-active {
  transition: 1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
}
.right-leave {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}
.right-leave-to {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}
